<template>
	<view class="result-container">
		<!-- 结果展示区 -->
		<view class="result-area">
			<view class="result-icon">
				<view class="circle-wrapper" :class="{ 'error': !verifySuccess }">
					<uv-icon :name="verifySuccess ? 'checkmark' : 'close'" size="58" bold color="#fff"></uv-icon>
				</view>
			</view>
			<text class="result-title" :class="{ 'error': !verifySuccess }">
				{{ verifySuccess ? '验券成功' : '验券失败' }}
			</text>
			<text class="result-time">{{ formatTime(verifyTime) }}</text>
			<!-- 失败原因 -->
			<text v-if="!verifySuccess" class="error-message">{{ errorMessage }}</text>
		</view>

		<!-- 券信息卡片 -->
		<view class="coupon-card" v-if="verifySuccess">
			<view class="card-header">
				<text class="card-title">券详情信息</text>
			</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">券码</text>
					<text class="value">{{ code }}</text>
				</view>
				<view class="info-item">
					<text class="label">商品名称</text>
					<text class="value">{{ couponInfo.productName }}</text>
				</view>
				<view class="info-item">
					<text class="label">用户</text>
					<text class="value">{{ couponInfo.userName }}</text>
				</view>
				<view class="info-item">
					<text class="label">手机号</text>
					<text class="value">{{ formatPhone(couponInfo.phone) }}</text>
				</view>
				<view class="info-item">
					<text class="label">验券门店</text>
					<text class="value">{{ couponInfo.storeName }}</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="btn primary" @tap="continueScan">
				{{ verifySuccess ? '继续验券' : '重新验券' }}
			</button>
			<button class="btn secondary" @tap="back">返回主页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				verifyTime: new Date(),
				verifySuccess: false,
				errorMessage: '',
				couponInfo: {
					code: '',
					productName: '',
					userName: '',
					phone: '',
					storeName: ''
				},
				code: '',
				type: 0,
			}
		},

		methods: {
			// 格式化时间
			formatTime(date) {
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`
			},
			async fetchVerifyCoupon() {
				try {
					this.loading = true;
					const data = await this.$http.post(`/breakfast/coupon/verify?code=${this.code}&type=${this.type}`);

					if (data && data.status === 1) {
						// 验券成功
						this.verifySuccess = true;
						this.couponInfo = {
							code: this.code,
							productName: data.productName || '',
							userName: data.userName || '',
							phone: data.phone || '',
							storeName: data.storeName || ''
						};
					} else {
						// 验券失败
						this.verifySuccess = false;
						this.errorMessage = data.msg || '验券失败，请重试';
					}
				} catch (e) {
					console.error(e);
					this.verifySuccess = false;
					this.errorMessage = e.msg || '验券失败，请重试';
				} finally {
					this.loading = false;
				}
			},

			// 格式化手机号
			formatPhone(phone) {
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			},

			// 继续验券
			continueScan() {
				uni.navigateBack();
			},

			// 返回
			back() {
				uni.switchTab({
					url: '/pages/my/index?mode=1'
				})
			}
		},

		async onLoad(options) {
			if (options.code) {
				this.code = options.code;
				this.type = options.type;
			}

			// 执行验券
			await this.fetchVerifyCoupon();
		}
	}
</script>

<style lang="scss" scoped>
	@import 'verify_result.scss';
</style>